<!-- 我的基础 -->

<template>
  <EasyRow flex>
    <div class="flex0">
      <SecureVideo :id="videoId" :visible="detailVisible" />

      <FormSelect bind="videoId" :dict="video_selectDict" noLabel noTip noClear />
    </div>

    <div>
      <ShowText label="点位编号" bind="pointCode" />

      <ShowText label="点位类型" bind="pointTypeName" />

      <ShowText :label="`${CORE.MAP.ASSET}名称`" bind="deviceName" />

      <ShowTree :label="`所在${CORE.MAP.REGION}`" bind="areaId, areaName" :dict="CORE.REGION.DICT" allName />
    </div>
  </EasyRow>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyBase',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb(), CORE.mixSelect('video', 'video_')],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('@admin/views/Secure/components', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 视频 ID
     */
    videoId() {
      const { id, videoId } = this.one
      return id && videoId ? videoId : ''
    },

    /**
     * 详情弹窗可见
     */
    detailVisible() {
      const detail = CORE.componentParent(this, 'DetailFirefighting')
      return detail ? detail.detailVisible : false
    },
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听区域 ID
     */
    'one.areaId'(areaId) {
      this.video_selectParam.areaId = areaId
      this.video_setSelect()
      this.video_startSelect()
    },

    /**
     * 监听监控设备就绪
     */
    video_readySelect(ready) {
      if (ready) this.one.videoId = (this.video_selectDict[0] || [])[0]
    },
  },
}
</script>
